package com.example.composedemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.LayoutInflater
import android.widget.TextView
import android.widget.Toast
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.AmbientContext
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.viewinterop.AndroidView
import androidx.constraintlayout.solver.state.State
import com.example.composedemo.ui.black1
import com.example.composedemo.ui.typography

class ConstraintActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
//            ConsLayout()
//            ColumnDemo()
//            RowDemo()
//            BoxDemo()
            CustomView()
        }
    }
}




@Composable
fun ConsLayout() {

    val mainModifier = Modifier
        .padding(40.dp)
        .fillMaxHeight()
        .fillMaxWidth()
        .background(Color.White)

    ConstraintLayout(modifier = mainModifier) {
        // kotlin 解构写法。注意createRefs()最多16个。单个使用createRef()
        val (logo, title) = createRefs()
        Image(
            bitmap = imageResource(id = R.drawable.header),
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(48.dp)
                .clip(CircleShape)
                .constrainAs(logo) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )

        Text(
            text = "欢迎使用Compose",
            fontSize = 24.sp,
            color = black1,
            style = typography.body1,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .constrainAs(title) {
                    top.linkTo(logo.bottom, 24.dp)
                    start.linkTo(logo.start)
                    end.linkTo(logo.end)
                }
        )
    }
}

@Composable
fun ColumnDemo() {

    Column(
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier =  Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        Text(
            text = "1",
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
        )

        Text(
            text = "2",
            modifier = Modifier
                .size(100.dp)
                .background(Color.Green)
                .border(1.dp, Color.Blue)
        )

        Text(
            text = "3",
            modifier = Modifier
                .size(100.dp)
                .background(Color.Blue)
        )
    }
}

@Composable
fun RowDemo() {
    Row(
//        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically,
        modifier =  Modifier
            .fillMaxWidth()
//            .fillMaxHeight()
    ) {
        Text(
            text = "1",
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
        )

        Text(
            text = "2",
            modifier = Modifier
                .size(50.dp)
                .background(Color.Green)
        )

        Text(
            text = "3",
            modifier = Modifier
                .size(100.dp)
                .background(Color.Blue)
                .clickable(onClick = {
                    
                })
        )
        
        LazyColumn(){
            items(arrayListOf("1", "2", "3", "4")) { item ->
                Text(
                    text = item
                )
            }
        }

        UseAndroidView()
    }
}

@Composable
fun UseAndroidView(){
    val context = AmbientContext.current
    val num = remember { mutableStateOf(0) }

    val textView = remember {
        TextView(context).apply {
            setOnClickListener {
                num.value = num.value + 1
            }
        }
    }

    AndroidView(viewBlock = { textView }){tv ->
        tv.text = "${num.value}"
    }

}

@Composable
fun BoxDemo(){
    Box(
        modifier = Modifier.size(200.dp)
            .background(Color.LightGray),
        contentAlignment = Alignment.BottomCenter
    ) {
        Text(
            text = "1",
            modifier = Modifier.size(100.dp)
                .align(Alignment.TopEnd)
                .background(Color.Magenta)
        )
        Text(
            text = "2",
            modifier = Modifier.size(50.dp).background(Color.Blue)
        )
    }
}

@Preview
@Composable
fun ConsPreview() {
    BoxDemo()
}